<template>
  <div>
    <FilterH @search="search" />

    <ActionBar class="mt-20" :listQuery="listQuery">
      <el-button
        type="primary"
        icon="el-icon-plus"
        size="small"
        slot="addBtn"
        @click="visible=true;handleRow={}"
      >添加成员</el-button>
      <FilterCol
        :col="membersCol"
        ref="filterCol"
        class="float-r mt-5"
        slot="filterCol"
        @getCol="getCol"
      />
    </ActionBar>

    <el-table border :data="list" size="small" class="mt-10" ref="userTable" v-loading="loading">
      <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
      <el-table-column
        align="center"
        :prop="item.prop"
        :label="item.label"
        v-for="(item,index) in formCol"
        :key="index"
      >
        <template slot-scope="scope">
          <el-switch
            class="ml-20"
            v-model="scope.row.accountStatus"
            :active-color="$store.state.settings.themeColor"
            :active-value="1"
            :inactive-value="0"
            v-if="item.prop=='accountStatus'"
            @change="(val)=>updateJobStatus(val,scope.row)"
          ></el-switch>
          <span v-else-if="item.prop=='organNames'">
            <el-link type="primary" :underline="false" v-if="!scope.row.organNames">---(未绑定)</el-link>
            <span v-else>{{scope.row.organNames}}</span>
          </span>
          <span v-else>{{scope.row[item.prop]}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="250">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="update(scope.row)">编辑</el-button>
          <ResetPwd :userId="scope.row.id" class="ml-10 mr-10" />
          <el-button size="mini" type="danger" plain @click="singleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="tr mt-30">
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next"
        :total="totalCount"
        :current-page="listQuery.currentPage"
        :page-size="listQuery.pageSize"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <EditDialog
      :roles="roles"
      :organs="organs"
      :visible="visible"
      :handleRow="handleRow"
      @getVisible="getVisible"
      v-if="visible"
    />
  </div>
</template>

<script>
import FilterH from "./components/Filter";
import ActionBar from "./components/ActionBar";
import EditDialog from "./components/EditDialog";
import ResetPwd from "./components/ResetPwd";
import FilterCol from "@/components/FilterCol";
import { membersCol } from "@/components/FilterCol/seting";
import dayjs from "dayjs";

import { userPageList, userDelBatch, userUpdate } from "api/seting/user";
export default {
  components: {
    FilterH,
    ActionBar,
    EditDialog,
    FilterCol,
    ResetPwd
  },
  data() {
    return {
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        params: {}
      },
      list: [],
      totalCount: 2,
      loading: false,
      selectedRow: [],
      visible: false,
      department: [],
      membersCol,
      formCol: [],
      roles: [],
      organs: [],
      handleRow: {},
      resetPwdVisible: false
    };
  },
  mounted() {
    this.headTable();
  },
  methods: {
    //表头处理
    headTable() {
      this.formCol = this.$refs.filterCol.formThead;
      this.loadData();
    },
    getCol(val) {
      this.formCol = val;
    },
    getVisible(val) {
      this.visible = val;
    },
    search(params) {
      this.listQuery.params = params;
      this.init();
    },
    init() {
      this.listQuery.currentPage = 1;
      this.loading = false;
      this.loadData();
    },
    // 加载列表
    loadData() {
      if (this.loading) return;
      this.loading = true;

      userPageList(this.listQuery)
        .then(res => {
          this.loading = false;
          this.list = res.data.list.map(o => {
            o.source =
              o.source == 0
                ? "系统"
                : o.source == 1
                ? "企业微信"
                : o.source == 2
                ? "导入"
                : "";
            o.sex = o.sex == "1" ? "男" : "女";
            o.entryDate = dayjs(o.entryDate).format("YYYY-MM-DD HH:mm:ss");
            return o;
          });
          this.totalCount = res.data.totalCount;
        })
        .catch(err => {
          this.loading = false;
          this.$message.error(err.msg);
        });
    },

    handlePageChange(page) {
      this.listQuery.currentPage = page;
      this.loadData();
    },
    // table 选中行
    handleSelectionChange(val) {
      this.selectedRow = val;
    },
    // batchDel() {
    //   var rows = this.selectedRow.map(o => o.id);
    //   this.del(rows);
    // },
    singleDel(row) {
      this.del([row.id]);
    },
    // 用户删除
    del(ids) {
      if (ids.length == 0) return;
      this.$confirm("此操作将永久删除用户,是否继续?", "提示")
        .then(_ => {
          userDelBatch(ids)
            .then(res => {
              this.loadData();
              this.$message.success("删除成功");
            })
            .catch(err => {
              this.$message.error(err.msg);
            });
        })
        .catch(_ => {});
    },
    // 编辑用户
    update(row) {
      this.visible = true;
      this.handleRow = row;
    },
    // 修改是否在职状态
    updateJobStatus(val, row) {
      userUpdate({
        id: row.id,
        accountStatus: val ? 1 : 0
      }).then(res => {});
    }
  }
};
</script>
<style lang="scss">
.popover-ab {
  padding: 0;
}
</style>
